<template>
  <el-container class="bigContainer">
    <el-header class="header" style="height: calc(100vw * 100 / 1920)">
      <div class="logo"></div>
      <div class="title">
        <span style="color: white"
          >朗&nbsp;驰&nbsp;科&nbsp;技&nbsp;内&nbsp;部&nbsp;管&nbsp;理&nbsp;平&nbsp;台</span
        >
      </div>
      <div class="right">
        <el-dropdown :hide-on-click="false" @command="itemClick">
          <span class="el-dropdown-link"> 用户中心 </span>
          <el-dropdown-menu
            slot="dropdown"
            style="margin-top: calc(100vw * -30 / 1920)"
          >
            <el-dropdown-item style="font-size: calc(100vw * 16 / 1920)">{{
              name
            }}</el-dropdown-item>
            <el-dropdown-item style="font-size: calc(100vw * 16 / 1920)"
              ><a download href="./用户使用手册.docx" class="aHover"
                >使用手册</a
              ></el-dropdown-item
            >
            <el-dropdown-item
              divided
              style="font-size: calc(100vw * 16 / 1920)"
              @click.native="upload"
              >主题样式</el-dropdown-item
            >
            <el-dropdown-item
              command="logout"
              divided
              style="font-size: calc(100vw * 16 / 1920)"
              >退出按钮</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <span @mouseenter="cancel">用户中心</span> -->
      </div>
    </el-header>
    <el-container style="height: 88%">
      <!-- 侧边导航栏菜单 -->
      <el-aside>
        <el-menu
          router
          background-color="#317bba"
          style="height: 100%"
          @open="addClass"
          class="aside"
          active-text-color="#409EFF"
          text-color="#fff"
        >
          <el-submenu
            :index="indexi + ''"
            v-for="(item, indexi) in routes"
            :key="indexi"
            v-show="item.name"
          >
            <template slot="title">
              <i :class="icon[indexi]" :ref="indexi"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(child, indexj) in item.children"
                :key="indexj"
                :index="child.path"
                >{{ child.name }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 左边菜单栏中的子菜单所对应的路由组件 -->
      <el-main>
        <img :src="'/api' + bannerImg" alt="" class="beijing" />
        <router-view />
      </el-main>
    </el-container>
    <!-- 跳出上传图片的弹框 -->
    <el-dialog
      title="上传图片"
      :visible.sync="centerUploadDialogVisible"
      width="30%"
      center
    >
      <el-upload
        drag
        style="margin-left: 100px"
        class="upload-demo"
        ref="upload"
        accept=".png, .jpg, .jpeg,.svg"
        :auto-upload="false"
        action="#"
        :limit="10"
        :on-change="handleChange"
        :on-exceed="handleExceed"
        :multiple="true"
        :file-list="fileList"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerUploadDialogVisible = false">取 消</el-button>
        <el-button type="success" plain  @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from "axios";
// import Header from "../components/Header.vue";
export default {
  name: "Home",
  data() {
    return {
      bannerImg: "/imgs/logo(1).svg",
      centerUploadDialogVisible: false,
      fileList: [],
      file: {},
      icon: [
        "el-icon-user-solid",
        "el-icon-menu",
        "el-icon-document",
        "el-icon-setting",
      ],
      name: sessionStorage.getItem("username"),
    };
  },
  computed: {
    routes() {
      let arr = [];
      console.log(this.$router.options.routes.slice(3));
      if (
        sessionStorage.getItem("role") == 1 ||
        sessionStorage.getItem("role") == 2
      ) {
        return this.$router.options.routes.slice(3);
      } else if (sessionStorage.getItem("role") == 3) {
        this.$router.options.routes[4].children.map((a, i) => {
          if (i == 2) arr.push(a);
        });
        this.$router.options.routes[4].children = arr;
        return this.$router.options.routes.slice(3);
      } else if (sessionStorage.getItem("role") == 4) {
        this.$router.options.routes[4].children.map((a, i) => {
          if (i == 1) arr.push(a);
        });
        this.$router.options.routes[4].children = arr;
        return this.$router.options.routes.slice(3);
      } else if (sessionStorage.getItem("role") == 5) {
        this.$router.options.routes[4].children.map((a, i) => {
          if (i == 3) arr.push(a);
        });
        this.$router.options.routes[4].children = arr;
        return this.$router.options.routes.slice(3);
      }
    },
  },
  mounted() {
    this.getUrl();
  },
  methods: {
    // 获取图片的数据
    addClass(e) {
      for (let key in this.$refs) {
        this.$refs[key][0].className = `${this.icon[key]} `;
      }
      this.$refs[e][0].className = `${this.icon[e]} active`;
    },
    itemClick(cmd) {
      let _this = this;
      if (cmd == "logout") {
        this.$confirm("此操作将注销登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // axios.get("/logout");
            // window.sessionStorage.removeItem("user");

            sessionStorage.clear();
            _this.$router.push({ name: "/login" });
            location.reload();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      }
    },
    upload() {
      this.centerUploadDialogVisible = true;
    },
    //文件上传状态改变触发
    handleChange(file, fileList) {
      //(file,fileList)参数
      this.uploading = false;
      this.file = file;
      this.fileList = fileList;
    },
    //文件上传的方法
    submitUpload() {
      // let _this = this;
      if (!this.file.size) {
        this.$message.warning("请选择上传的图片");
        return;
      }
      let formData = new FormData();
      this.fileList.forEach((file) => {
        formData.append("file", file.raw);
      });
      this.$api.enterprise.upLoadImg2(formData).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.getUrl();
          this.$message({
            type: "success",
            message: "背景图片更新成功！",
          });
        } else {
          this.$message({
            type: "error",
            message: "图片失败,请重新上传!",
          });
        }
      });
      this.centerUploadDialogVisible = false;
      this.$refs["upload"].clearFiles();
    },
    //文件超出个数限制
    handleExceed() {
      this.$message.warning("仅允许上传十个文件！");
    },
    // 获取图片路径
    getUrl() {
      this.$api.enterprise.getImg2().then((res) => {
        console.log(res.data.data);
        this.bannerImg = res.data.data;
      });
    },
  },
};
</script>

<style scoped lang="less">
.el-container {
  height: 100%;
  width: 100%;
  .el-header {
    // position: fixed;
    display: flex;
    justify-content: space-between;
    // background-image: linear-gradient(to right, #fff, #9fd4f3, #f5f5f5);
    background-image: linear-gradient(#5cb4be, #317bba);
    .logo {
      flex: 11%;
      width: 100%;
      height: 90%;
      margin-top: calc(100vw * 6 / 1920);
      margin-left: calc(100vw * 25 / 1920);
      background-image: url("../assets/langchiLogo2.png");
      background-size: 100% 100%;
    }
    .title {
      flex: 83%;
      display: inline-block;
      // font-size: 75px;
      font-size: calc(100vw * 75 / 1920);
      width: 50%;
      // font-size: 75px;
      font-family: 华文行楷;
      text-align: center;
      line-height: calc(100vw * 110 / 1920);
    }
    .right {
      flex: 6%;
      line-height: calc(100vw * 110 / 1920);
      .el-dropdown-link {
        display: inline-block;
        color: black;
        // font-size: 24px;
        font-size: calc(100vw * 24 / 1920);
        font-family: 华文行楷;
        cursor: pointer;
        .el-dropdown-menu {
          .el-dropdown-menu__item {
            color: black !important;
          }
        }
      }
    }
  }
  .el-container {
    .el-aside {
      overflow: hidden;
      .el-menu {
        .el-submenu {
          i {
            font-size: 20px;
            // font-size: 20px;
            font-weight: 700;
            margin-right: 30px;
            margin-left: 20px;
          }
          span {
            font-size: 30px;
            // font-size: 30px;
            font-family: 华文行楷;
          }
        }
        .el-menu-item {
          font-family: 华文行楷;
          font-size: 20px;
          // font-size: 20px;
          margin-left: 80px;
        }
      }
    }
    .el-main {
      width: 99%;
      height: 99%;
      // background: url("../assets/logo(1).svg") no-repeat center;
      // background-size: 159px 222px;
      margin: 0.5% 0 0 0.5%;
      background-size: calc(50vh);
      // opacity: 0.5;
      // z-index: 999 !important;
      // }
      .beijing {
        position: fixed;
        top: 60%;
        left: 58%;
        transform: translate(-50%, -50%);
        width: 72%;
        height: 72%;
      }
    }
  }
}

.active {
  color: rgb(37, 161, 233);
}
.aHover:hover {
  color: rgb(37, 161, 233);
}
</style>
